<script setup>
import { ElButton  } from 'element-plus';
import { useRouter } from 'vue-router';
import { userStore } from '@/store/index.js';
import {Bicycle, Camera, Collection, Edit, Memo, ShoppingCart, User} from "@element-plus/icons-vue";
import axios from "axios";
import {onMounted} from "vue";
import { ref } from 'vue';


const router = useRouter();
const goMyOrder = () => {
  closeActive();
  buttonStates.value.order = true;
  router.push("/order2").catch(err => err);};
const goGoodsCart = () => {
  closeActive();
  buttonStates.value.cart = true;
  router.push("/goodsCart2").catch(err => err);};
const goShopping = () => {
  closeActive();
  buttonStates.value.shopping = true;
  router.push("/storeApp/").catch(err => err);};
const closeActive =()=>{
  buttonStates.value = {
    shopping: false, cart: false, order: false,}
}
const buttonStates = ref({
  shopping: false, cart: false, order: false,
});
</script>

<template>
  <div class="banner">
    <el-button-group style="margin-right: 150px;">
      <el-button type="primary" size="large" @click="goShopping" :class="['custom-button', { 'active': buttonStates.shopping }]">
        <el-icon><Handbag /></el-icon>商城首页
      </el-button>
      <el-button type="primary" size="large" @click="goGoodsCart" :class="['custom-button', { 'active': buttonStates.cart }]">
        <el-icon><ShoppingCart /></el-icon>购物车
      </el-button>
      <el-button type="primary" size="large" @click="goMyOrder" :class="['custom-button', { 'active': buttonStates.order }]">
        <el-icon><Calendar /></el-icon>我的订单
      </el-button>
    </el-button-group>
  </div>
<!--    <el-menu router>-->
<!--      <el-sub-menu>-->
<!--        <template>-->
<!--          <el-menu-item  index="/storeApp/store2">商城首页</el-menu-item>-->
<!--          &lt;!&ndash;        <el-button type="primary" size="small" index="/storeApp/myOrder2"><el-icon><ShoppingCart /></el-icon>我的订单</el-button>&ndash;&gt;-->

<!--        </template>-->
<!--      </el-sub-menu>-->

<!--    </el-menu>-->





</template>

<style scoped>
.banner {
  display: flex;
  justify-content: space-between;
  align-items: center;

  top: 0;
  left: 0;
  width: 100%;
  background: rgb(255, 255, 255);
}
.custom-button {
  font-size: 16px; /* 调整字体大小 */
  padding: 12px 24px; /* 调整内边距 */
  margin: 0 8px; /* 调整外边距 */
  border-radius: 4px; /* 调整圆角 */
  transition: all 0.3s; /* 添加过渡效果 */
}

.custom-button:hover {
  background-color: #67c23a; /* 悬停时的背景颜色 */
  color: white; /* 悬停时的文字颜色 */
}

.custom-button.active {
  background-color:#67c23a; /* 激活时的背景颜色 */
  color: white; /* 激活时的文字颜色 */
}

.el-button-group .el-button {
  border-radius: 0; /* 移除按钮组内的圆角 */
}

.el-button-group .el-button:first-child {
  border-top-left-radius: 4px; /* 第一个按钮左上角圆角 */
  border-bottom-left-radius: 4px; /* 第一个按钮左下角圆角 */
}

.el-button-group .el-button:last-child {
  border-top-right-radius: 4px; /* 最后一个按钮右上角圆角 */
  border-bottom-right-radius: 4px; /* 最后一个按钮右下角圆角 */
}
</style>